<template>
  <div>
    <template v-if="!formInlineShow">
      <div class="titleItem">
        <span>{{ $t("maintenance.Maintenancecontent") }}</span>
        <div class="checkObject" style="padding: 0 0">
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">
              {{ $t("maintenance.MaintenanceLevel") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemLevel }}
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">
              {{ $t("maintenance.MaintenanceItem") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemProject }}
            </div>
          </div>
        </div>
        <div class="checkObject" style="padding: 0 0">
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">
              {{ $t("maintenance.MaintenanceMethod") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemMethod }}
            </div>
          </div>

          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">
              {{ $t("点检位置") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.bomOrg }}
            </div>
          </div>
        </div>
      </div>
      <div class="titleItem">
        <span>{{ $t("maintenance.Maintenancestandards") }}</span>
        <div class="checkObject">
          <div class="checkObjectItem">
            <div class="checkObjectName">
              {{ $t("maintenance.numberRequirements") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.minValue }}
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName" :class="{ required: true }">
              {{ $t("maintenance.workinghours") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.itemHours }}
            </div>
          </div>
          <div class="checkObjectItem">
            <div class="checkObjectName">
              {{ $t("maintenance.Maintenancestandards") }}
            </div>
            <div class="checkObjectValue">
              {{ formInline.unitName }}
            </div>
          </div>
        </div>
      </div>
    </template>
    <div class="titleItem tab">
      <span>{{ $t("maintenance.usetools") }}</span>
    </div>
    <div class="tableContent">
      <Table
        ellipsis
        ref="selection"
        :columns="toolColumns"
        :data="planToolList"
      >
      </Table>
    </div>

    <div class="titleItem tab">
      <span>{{ $t("maintenance.Usematerial") }}</span>
    </div>
    <div class="tableContent">
      <Table ellipsis ref="selection" :columns="materColumns" :data="materData">
      </Table>
    </div>
  </div>
</template>

<script>
export default {
  name: "contentDetail",
  props: ["formInline", "planToolList", "materData", "formInlineShow"],
  data() {
    return {
      materColumns: [
        {
          type: "index",
          width: 90,
          title: `${this.$t("common.index")}`,
          align: "center",
        },
        {
          title: `${this.$t("maintenance.MaterialnoInfo")}`,
          key: "materielNo",
          align: "center",
        },
        {
          title: `${this.$t("common.GoodsName")}`,
          key: "goodsName",
          align: "center",
        },
        {
          title: `${this.$t("spareParts.Specification")}`,
          key: "specification",
          align: "center",
        },
        {
          title: `${this.$t("spareParts.quantity")}`,
          key: "num",
          width: 170,
          align: "center",
        },
      ],
      levels: [
        { value: 1, label: "一级点检" },
        { value: 2, label: "二级点检" },
        { value: 3, label: "三级点检" },
      ],
      toolColumns: [
        {
          type: "index",
          width: 80,
          title: `${this.$t("common.index")}`,
          align: "center",
        },
        {
          title: `${this.$t("maintenance.ToolMaterialNo")}`,
          key: "toolCode",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("maintenance.Toolnames")}`,
          key: "toolName",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("保管方式")}`,
          key: "toolMode",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("spareParts.quantity")}`,
          key: "toolNum",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
      ],
      materialColumns: [
        {
          title: `${this.$t("maintenance.materialcode")}`,
          key: "materialCode",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("maintenance.materialname")}`,
          key: "materialName",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("spareParts.quantity")}`,
          key: "num",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("maintenance.Unitprice")}`,
          key: "unitPrice",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: `${this.$t("maintenance.totalprice")}`,
          key: "totalPrice",
          align: "center",
          minWidth: 100,
          tooltip: true,
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.titleItem {
  position: relative;
  font-size: 18px;
  padding: 10px;

  .checkObject {
    display: flex;
    flex-wrap: wrap;

    .checkObjectItem {
      display: flex;
      flex: 33.33%;
      flex-wrap: wrap;
      .checkObjectName {
        color: #000000 !important;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        background: #f5f6f7;
        text-align: left;
        padding-left: 10px;
      }

      .checkObjectValue {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        padding-left: 10px;
      }
    }
  }

  .checkTool {
    display: flex;
    padding: 20px;

    .checkToolItem {
      flex: 1;

      .checkObjectName {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        background: #f5f6f7;
        text-align: center;
      }

      .checkObjectValue {
        height: 40px;
        line-height: 40px;
        width: 100%;
        border: 1px solid #eeeeee;
        text-align: center;
      }
    }
  }

  .searchBox {
    .label {
      display: flex;
    }
  }
}

.contentTable {
  margin: 20px;
}

.titleItem::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 20px;
  top: 12px;
  left: 0px;
  background: #187bdb;
}
</style>
